<template>
    <div>
        <!-- 顶部滑动条 -->
			<div id="slider" class="mui-slider">
				<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<div class="mui-scroll">
						<a :class="['mui-control-item',item.id == 0 ? 'mui-active' : '']" href="#item1mobile" 
						      v-for="item in cates" :key="item.id" @tap="getPictureListByCateId(item.id)"><!-- tap只有mui的组件可以使用 -->
							{{item.title}}
						</a>
					</div>
				</div>
			</div>
	    <!-- 图片列表区域 -->
		<ul class="picture-list">
			<router-link v-for="item in list" :key="item.id" 
			     :to="'/home/pictureinfo/'+item.id" tag="li">
				<img v-lazy="item.img_url">
				<div class="info">
					<h1 class="info-title">{{item.title}} </h1>
					<div class="info-body">{{item.zhaiyao}} </div>
				</div>
			</router-link>
		</ul>
		</div>
</template>
<script>
import {Toast} from 'mint-ui'
//导入js文件
import mui from '../../lib/mui/js/mui.js'

export default {
    data(){
        return{
			cates:[],//所有分类列表
			list:[], //图片列表数组
        }
	},
	created(){
		this.getALLCategory()
		//默认进入页面，就主动请求所有的图片列表的数据
		this.getPictureListByCateId(0)
	},
    mounted(){//当组件中的dom结构被渲染好并放到页面中后，会执行这个钩子函数
    //如果要操作元素了，最好在mounted中，因为这时候的dom元素是最新的
    //2、初始化滑动组件
        mui('.mui-scroll-wrapper').scroll({
	        deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
        });
    },
    methods:{
		getALLCategory(){//获取所有的图片分类
			this.axios.get('api/getimgcategory').then(result => {
				if(result.data.status === 0){
					//拼接出一个“全部”的列表
					result.data.message.unshift({title:"全部",id:0})
					this.cates = result.data.message
				}else{
					Toast("获取分类列表失败")
				}
			})
		},
		getPictureListByCateId(cateId){//根据分类ID，获取图片列表
			this.axios.get('api/getimages/' + cateId).then(result => {
				if(result.data.status === 0){
					this.list = result.data.message
				}else{
					Toast("获取图片列表失败")
				}
			})
		}

    }
}
</script>
<style lang="scss">
*{
    touch-action: pan-y;
}
.picture-list{
	list-style: none; //消除每个图片前面的小圆点
	margin: 0;//上下撑满全屏
	// padding:0;//左右撑满全屏
	padding:10px;//左后各空出10个像素点
	padding-bottom: 0;//整体来说，与底部没有间隙
	li{
		background-color: #ccc;
		margin-bottom: 10px; //上面不动，下面空出10个像素点
		text-align: center;//居中对齐
		box-shadow: 0 0 9px #999;//给图片添加阴影
		position: relative; //li的div为相对的
		img{
			width: 100%;
			vertical-align: middle;//vertical-align 属性设置元素的垂直对齐方式。把此元素放置在父元素的中部。
		}
		img[lazy=loading] { //懒加载模式控制
			width: 40px;
			height: 300px;
			margin: auto;
		}
		.info{
			color: white;
			text-align: left;
			position: absolute; //info的div为绝对的,所以它会在li的最上面，置于顶部
			bottom: 0;  //紧贴着info div的底部
			background-color: rgba(0,0,0,0.4) ;//设置半透明背景色
			max-height: 82px; //将info的最大高度固定，不显示所有的摘要
			.info-title{
				font-size: 14px;
			}
			.info-body{
				font-size: 13px;
			}
	   }
	}
	
}
</style>